<template>
  <div class="md5">
    <div class="md5-input">
      <Textarea v-model="originValue"></Textarea>
    </div>
    <Button @click="anysisOriginValue">解析</Button>
    <div class="md5-input">
      <Textarea v-model="anysisValue">
        <div class="md5-input-header">
          <i class="iconfont iconfuzhi" @click="copyResult"></i></div
      ></Textarea>
    </div>
  </div>
</template>

<script setup lang="ts">
import Textarea from '@/components/Textarea/index.vue'
import Button from '@/components/button.vue'
import md5encryption from 'js-md5'
import { copy } from '@/util/util'
import { ref } from 'vue'

const originValue = ref<string>('')
const anysisValue = ref<string>('')

// 解析源数据
const anysisOriginValue = () => {
  const md5Sign = md5encryption(originValue.value)
  anysisValue.value = md5Sign
}

// 复制翻译结果
const copyResult = () => {
  copy(anysisValue.value)
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
